<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-form class="form-container"> -->
        <el-input @keyup.enter.native="handleFilter" v-model="listQuery.phonenum" clearable placeholder="搜索昵称、手机号"
                  style="width: 200px;"></el-input>
        <!-- <el-date-picker type="date" format="yyyy-MM-dd" placeholder="创建时间（开始）" v-model="listQuery.create_time" style="width: 200px;">
                </el-date-picker>
                <el-date-picker type="date" format="yyyy-MM-dd" placeholder="创建时间（结束）"  v-model="listQuery.end_time" style="width: 200px;">
                </el-date-picker> -->
        <el-button type="primary" icon="el-icon-search" @click="handleFilter" class="search">搜索</el-button>
      <!-- </el-form> -->
    </div>
    <div>
      <el-table :data="tableData" :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}" row-key="id" v-loading="listLoading" element-loading-text="加载中..." fit
                highlight-current-row style="width: 100%;color:#222;font-size: 12px;font-family: PingFangSC-Regular;">
        <el-table-column align="center" label="昵称">
          <template slot-scope="scope">
            <img :src="scope.row.headimgurl|| defultImg" @error="setDefultImg" style="width:40px;height:40px;border-radius:100%;vertical-align:middle;">
							<div>{{scope.row.nickname}}</div>
							<div>（ID：{{scope.row.showId}}）</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="手机号">
          <template slot-scope="scope">
            <span>{{scope.row.mobile}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="积分总额">
          <template slot-scope="scope">
            <span>{{scope.row.points}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="用户身份">
          <template slot-scope="scope">
            <span v-if="scope.row.vipType == 1">普通会员</span>
            <span v-if="scope.row.vipType == 2">vip</span>
            <span v-if="scope.row.vipType == 3">代理商</span>
            <span v-if="scope.row.vipType == 4">svip</span>
            <span v-if="scope.row.vipType == 5">合伙人</span>
            <span v-if="scope.row.vipType == 6">分公司</span>
          </template>
        </el-table-column>
        <el-table-column  width="200" align="center" label="操作">
          <template slot-scope="scope">
            <b v-if="permission == 3" @click="giveIntegre(scope.row.userId, scope.$index, $event)">调整积分</b>
            <span v-if="permission == 3" class="color-409">|</span>
            <b>
              <router-link :to="{ path: '/marketing/point/points/' + scope.row.userId }">积分明细</router-link>
            </b>
          </template>
        </el-table-column>
      </el-table>
      <div class="block text-c">
        <!--分页组件 current-page:当前页   -->
        <!--   page-sizes:每页几条数据（选项）   -->
        <!--   page-size:每页几条数据   -->
        <!--   total:总条数   -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.page"
          :page-sizes="[20, 30, 40, 50]"
          :page-size="20"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listQuery.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import { getUsersPointList, giveIntegre } from '@/api/member'
  import { marketing_point } from '@/utils/permission'
  import defultImg from '@/assets/default_head.png'
  export default {
    data() {
      return {
        defultImg,
        permission: 3,
        listQuery: {
          currentPage: 1, // 当前页
          total: null, // 数据总条数
          create_time: null,
          end_time: null,
          phonenum: null,
          page: 1
        },
        tableData: [],
        listLoading: false
      }
    },
    created() {
      this.getModelPermission()
      this.getList()
    },
    methods: {
      setDefultImg(e) {
        e.target.src = defultImg
      },
      getModelPermission() {
        this.permission = marketing_point()
      },
      getList() {
        this.listLoading = true
        getUsersPointList(this.listQuery).then(res => {
          this.tableData = res.data.data.points.data
          this.listQuery.total = res.data.data.points.total
          this.listLoading = false
        }).catch(err => {
          console.log(err)
        })
      },
      giveIntegre(userId, index, $event) { // 赠送积分
        this.$prompt('请输入积分(如要减积分请输入负号，如-10)', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[0-9]{1,}/,
          inputErrorMessage: '积分输入不正确'
        }).then(({ value }) => {
          if (Math.round(this.tableData[index].points) + Math.round(value) < 0) {
            this.$message({
              type: 'warning',
              message: '账户积分不足，无法操作！'
            })
            return false
          }
          var data = { userId: userId, value: value }
          this.listLoading = true
          giveIntegre(data).then(res => {
          	this.listLoading = false
            this.$message({
              type: 'success',
              message: '成功调整积分: ' + value
            })
            this.tableData[index].points = (Math.round(this.tableData[index].points) + Math.round(res.data.data)).toFixed(2)
          }).catch(err => {
          	this.listLoading = false
            console.log(err)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
      },
      handleSizeChange(val) { // 切换每页几条数据方法
        // console.log(`每页 ${val} 条`)
        this.listQuery.limit = val
        this.getList()
      },
      handleCurrentChange(val) { // 切换当前页
        // console.log(`当前页: ${val}`)
        this.listQuery.page = val
        this.getList()
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      }
    }
  }
</script>

<style scoped>
  b {
    font-weight: 500;
    cursor: pointer;
    padding: 0 5px;
  }

  b:hover {
    color: #0A76A4;
  }
</style>
